<template>
  <div class="set-admin-study-add">
    <w-nav-bar
      :title="isEdit ? '编辑学习总结' : '添加学习总结'"/>
    <div class="w-flex-center image-box">
      <w-image-up
        ref="W_IMAGE_UP"
        :souce-url="model.pic"/>
    </div>
    <group>
      <x-input
        title="标题"
        placeholder="请输入标题"
        v-model="model.title"/>
      <x-textarea
        title="描述"
        placeholder="请输入描述"
        v-model="model.describe"/>
      <w-type-picker
        ref="WTypePicker"
        :class-model="classModel"
        :model="model"/>
    </group>
    <group>
      <w-simplemde-markdown
        ref='WSimplemdeMarkdown'/>
    </group>
    <w-bottom-btn
      :model="model"
      :btn1-title="isEdit ? '删除' : ''"
      dispose-parameter1="title"
      @click2="okBtnClick"/>
  </div>
</template>

<script>
  import WBottomBtn from '@/components/mobile/confirmBottomBtn'
  import WImageUp from '@/components/global/imageUp/oss'
  import StudyModel from '@/models/web/StudyModel'
  import WSimplemdeMarkdown from '@/components/global/simplemdeMarkdown'
  import { Group, XInput, XTextarea } from 'vux'
  import WTypePicker from '../../../../com/typePicker'
  export default {
    name: "SetAdminStudyAdd",
    components: {
      WBottomBtn,
      WImageUp,
      StudyModel,
      WSimplemdeMarkdown,
      Group, XInput, XTextarea,
      WTypePicker
    },
    data() {
      return {
        /**
         * 模型数据
         */
        model: new StudyModel(),
        /**
         * 类
         */
        classModel: StudyModel
      }
    },
    computed: {
      /**
       * 是否是编辑模式
       */
      isEdit() {
        return this.$route.query.id
      }
    },
    methods: {
      /**
       * 确定按钮点击
       */
      okBtnClick(callback) {
        this.model.type = this.$refs['WTypePicker'].getType()
        this.$w_check_form(this.model, [
          {
            key: 'title',
            msg: '请填写标题'
          },
          {
            key: 'type',
            msg: '请填写类型'
          }
        ], () => {
          this.$refs['W_IMAGE_UP'].upImage ().w_then_finally((data) => {
            this.model.pic = data
          }, () => {
            this.model.content = this.$refs['WSimplemdeMarkdown'].getValue()
            callback()
          })
        })
      },
      /**
       * 加载模型数据
       */
      loadModel() {
        if (this.$route.query.id) {
          this.model._id = this.$route.query.id
          this.model.getDetail().w_then(() => {
            this.$refs['WSimplemdeMarkdown'].setValue(this.model.content)
            this.$refs['WTypePicker'].setType(this.model.type)
          })
        } else {
          this.model.type = this.$route.query.type
        }
      }
    },
    mounted() {
      this.loadModel()
    }
  }
</script>

<style lang="scss" scoped>
.set-admin-study-add {
  font-size: 16px;
  .image-box {
    padding-top: 10px;
  }
  .type-btn {
    display: inline-block;
    width: 70px;
    text-align: center;
    line-height: 44px;
    color: #65b8fd;
  }
}
</style>
